<template>
  <div class="tech_main_border">
    <div class="tech_border_title">
      {{ title }}
    </div>
    <div class="tech_border_context"><slot name="context"></slot></div>
  </div>
</template>

<script>
export default {
  name: 'techBorder',
  props: ['title']
}
</script>

<style>
.tech_main_border {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(#1b58aa, #1b58aa) left top,
    linear-gradient(#1b58aa, #1b58aa) left top,
    linear-gradient(#1b58aa, #1b58aa) right top,
    linear-gradient(#1b58aa, #1b58aa) right top,
    linear-gradient(#1b58aa, #1b58aa) left bottom,
    linear-gradient(#1b58aa, #1b58aa) left bottom,
    linear-gradient(#1b58aa, #1b58aa) right bottom,
    linear-gradient(#1b58aa, #1b58aa) right bottom;
  background-repeat: no-repeat;
  border: 1px solid #123279;
  background-size:
    0.2vw 1.5vw,
    1.5vw 0.2vw;
}
.tech_border_title {
  width: 100%;
  height: 35px;
  text-align: center;
  padding-top: 4px;
  color: white;
  background-image: linear-gradient(to right, #ffffff00, #043a99, #f7f7f700);
}
.tech_border_context {
  width: 100%;
  height: calc(100% - 40px);
}
</style>
